<template>
	<view class="live-container" :class="{ 'fullscreen': isFullScreen }">
		<!-- 顶部信息栏 -->
		<view class="header" v-show="showUI && !isFullScreen">
			<view class="host-info">
				<image class="avatar"
					src="https://ai-public.mastergo.com/ai/img_res/3d1b557525b94a8c3d02e6f7b3c34fb1.jpg" />
				<text class="nickname">小兔兔</text>
			</view>
			<view class="viewers">
				<uni-icons type="eye" size="16" color="#ffffff"></uni-icons>
				<text class="count">{{ viewerCount }}</text>
				<uni-button size="mini" type="primary" class="follow-btn">关注</uni-button>
			</view>
		</view>

		<!-- 直播内容区 -->
		<view class="live-content">
			<!-- 直播画面区 -->
			<view class="video-container" :class="{ 'fullscreen-video-container': isFullScreen }">
			   <video 
			      id="liveVideo" 
			      src="http://123.60.66.194:9000/mybucket/20250525/718.mp4" 
			      :controls="showUI && !isFullScreen"
			      :class="{ 
			        'fullscreen-video-stretch': isFullScreen && videoStretchMode,
			        'fullscreen-video': isFullScreen && !videoStretchMode
			      }"
			    ></video>
			  <scroll-view class="danmaku-container" :scroll-top="danmakuScrollTop">
			    <view v-for="(item, index) in danmakuList.slice(-100)" :key="index" 
			          class="danmaku-item" 
			          :class="{ 'fullscreen-danmaku-item': isFullScreen }"
			          :style="getDanmakuStyle(item, index)"
			          v-show="!item.hidden"
			          @animationend="handleDanmakuEnd(item)">
			      <text v-if="item.user" class="danmaku-user">{{ item.user }}：</text>
			      <text class="danmaku-content">{{ item.content }}</text>
			    </view>
			  </scroll-view>
			  <!-- 全屏按钮 -->
			  <view class="fullscreen-btn" @tap="toggleFullScreen">
			    <uni-icons :type="isFullScreen ? 'exit-fullscreen' : 'fullscreen'" size="24" color="#ffffff"></uni-icons>
			  </view>
			  
			  <!-- 增强版全屏按钮（更明显） -->
			  <view class="enhanced-fullscreen-btn" @tap="toggleFullScreen">
			    <text style="color: white; font-size: 20rpx;">全屏</text>
			  </view>
			  
			  <!-- 视频填充模式切换按钮（仅全屏时显示） -->
			  <view v-if="isFullScreen" class="video-mode-btn" @tap="toggleVideoMode">
			    <text style="color: white; font-size: 18rpx;">{{ videoStretchMode ? '比例' : '填满' }}</text>
			  </view>
			  
			</view>

			<!-- 右侧功能按钮组 -->
			<view class="action-buttons" v-show="showUI && !isFullScreen">
				<view class="action-item" @tap="toggleDanmakuSettings">
					<uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
					<text class="action-text">弹幕设置</text>
				</view>
				<view class="action-item">
					<uni-icons type="share" size="24" color="#ffffff"></uni-icons>
					<text class="action-text">分享</text>
				</view>
				<view class="action-item">
					<uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
					<text class="action-text">礼物</text>
				</view>
				<view class="action-item">
					<uni-icons type="more-filled" size="24" color="#ffffff"></uni-icons>
					<text class="action-text">更多</text>
				</view>
			</view>
		</view>

		<!-- 历史弹幕消息列表 -->
		<view class="danmaku-history" v-show="showUI && !isFullScreen">
			<scroll-view class="history-list" scroll-y>
				<view v-for="(item, index) in danmakuList.slice(-100).reverse()" :key="index" class="history-item"
					:style="{ borderLeftColor: item.color }">
					<text v-if="item.user" class="history-user">{{ item.user }}：</text>
					<text class="history-content">{{ item.content }}</text>
					<text class="history-time">{{ formatTime(item.timestamp) }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 弹幕设置面板 -->
		<view class="danmaku-settings" v-if="showDanmakuSettings">
			<view class="settings-header">
				<text class="settings-title">弹幕设置</text>
				<uni-icons type="closeempty" size="24" color="#ffffff" @tap="toggleDanmakuSettings"></uni-icons>
			</view>

			<view class="settings-content">
				<view class="setting-group">
					<text class="setting-label">弹幕颜色</text>
					<view class="color-options">
						<view v-for="(color, index) in danmakuColors" :key="index" class="color-option"
							:style="{ backgroundColor: color }" @tap="selectDanmakuColor(color)"
							:class="{ active: selectedColor === color }"></view>
					</view>
				</view>

				<view class="setting-group">
					<text class="setting-label">弹幕大小</text>
					<view class="size-options">
						<view class="size-option" :class="{ active: selectedSize === 'small' }"
							@tap="selectDanmakuSize('small')">
							小
						</view>
						<view class="size-option" :class="{ active: selectedSize === 'medium' }"
							@tap="selectDanmakuSize('medium')">
							中
						</view>
						<view class="size-option" :class="{ active: selectedSize === 'large' }"
							@tap="selectDanmakuSize('large')">
							大
						</view>
					</view>
				</view>

				<view class="setting-group">
					<text class="setting-label">弹幕区域</text>
					<view class="position-options">
						<view class="position-option" :class="{ active: danmakuPosition === 'full' }"
							@tap="selectDanmakuPosition('full')">
							全屏
						</view>
						<view class="position-option" :class="{ active: danmakuPosition === 'top' }"
							@tap="selectDanmakuPosition('top')">
							顶部
						</view>
						<view class="position-option" :class="{ active: danmakuPosition === 'bottom' }"
							@tap="selectDanmakuPosition('bottom')">
							底部
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer" :class="{ 'fullscreen-footer': isFullScreen }" v-show="showUI">
			<view class="input-area">
				<view class="danmaku-switch" @tap="toggleDanmaku">
					<uni-icons :type="isDanmaku ? 'checkbox-filled' : 'circle'" size="20"
						:color="isDanmaku ? '#007AFF' : '#999'"></uni-icons>
					<text class="switch-text">弹幕</text>
				</view>
				<input class="message-input" type="text" v-model="inputMessage" placeholder="说点什么..."
					@focus="handleInputFocus" @blur="handleInputBlur" @confirm="sendMessage" />
				<uni-button size="mini" type="primary" class="send-btn" @tap="sendMessage">发送</uni-button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onUnmounted } from 'vue';

	// 添加WebSocket相关引用
	const websocket = ref<WebSocket | null>(null);
	const websocketConnected = ref(false);
	const websocketTask = ref<any>(null);

	const showUI = ref(true);
	const isDanmaku = ref(true);
	const inputMessage = ref('');
	const viewerCount = ref(12345);
	const danmakuList = ref<Array<{
		content: string;
		top: number;
		color: string;
		fontSize: number;
		user?: string;
		position?: string;
		timestamp?: number;
	}>>([]);
	const danmakuScrollTop = ref(0);
	const showDanmakuSettings = ref(false);
	const isFullScreen = ref(false); // 新增：全屏状态
	const videoStretchMode = ref(true); // 视频拉伸模式：true=拉伸填满，false=保持比例

	// 弹幕设置相关
	const danmakuColors = ref(['#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']);
	const selectedColor = ref('#ffffff');
	const selectedSize = ref('medium'); // small, medium, large
	const danmakuPosition = ref('full'); // full, top, bottom

	const fontSizeMap = {
		small: 12,
		medium: 16,
		large: 20
	};

	const toggleUI = () => {
		showUI.value = !showUI.value;
	};

	const toggleDanmaku = () => {
		isDanmaku.value = !isDanmaku.value;
	};

	const toggleDanmakuSettings = () => {
		showDanmakuSettings.value = !showDanmakuSettings.value;
	};

	const selectDanmakuColor = (color: string) => {
		selectedColor.value = color;
	};

	const selectDanmakuSize = (size: string) => {
		selectedSize.value = size;
	};

	const selectDanmakuPosition = (position: string) => {
		danmakuPosition.value = position;
	};

	// 调试全屏功能
	const debugFullScreen = () => {
	  console.log('=== 全屏调试信息 ===');
	  console.log('当前全屏状态:', isFullScreen.value);
	  
	  // 检查video元素
	  const videoElement = document.getElementById('liveVideo');
	  console.log('video元素存在:', !!videoElement);
	
	  
	  // 检查当前文档全屏状态
	  const fullscreenElement = 
	    document.fullscreenElement ||
	    (document as any).webkitFullscreenElement ||
	    (document as any).mozFullScreenElement ||
	    (document as any).msFullscreenElement;
	  console.log('当前全屏元素:', fullscreenElement);
	  
	  
	};

	// 全屏切换
	const toggleFullScreen = () => {
		console.log('=== 全屏按钮被点击 ===');
		
		// 切换全屏状态
		isFullScreen.value = !isFullScreen.value;
		console.log('全屏状态已切换为:', isFullScreen.value);
		
		// 显示提示
		uni.showToast({
			title: isFullScreen.value ? '进入横屏全屏' : '退出全屏',
			icon: 'none',
			duration: 1500
		});
	};

	// 切换视频填充模式
	const toggleVideoMode = () => {
		videoStretchMode.value = !videoStretchMode.value;
		uni.showToast({
			title: videoStretchMode.value ? '切换到拉伸填满' : '切换到保持比例',
			icon: 'none',
			duration: 1000
		});
	};

	const handleInputFocus = () => {
		// 处理输入框获得焦点事件
	};

	const handleInputBlur = () => {
		// 处理输入框失去焦点事件
	};


	const formatTime = (timestamp: number | undefined) => {
		if (!timestamp) return '';
		const date = new Date(timestamp);
		return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
	};

	// 获取弹幕样式
	const getDanmakuStyle = (item: any, index: number) => {
		const baseStyle = {
			color: item.color,
			fontSize: item.fontSize + 'px'
		};

		if (isFullScreen.value) {
			// 横屏全屏模式下，弹幕从右到左水平滚动
			console.log('全屏模式弹幕样式:', item.content, isFullScreen.value);
			return {
				...baseStyle,
				top: Math.floor(Math.random() * 70) + 15 + '%', // 随机高度分布，避免遮挡按钮
				right: '-200px', // 确保从屏幕右侧开始
			};
		}

		// 普通模式下，弹幕从右侧滑入
		return {
			...baseStyle,
			top: item.top + 'rpx',
			right: '100%',
			animation: 'danmaku 8s linear'
		};
	};

	const handleDanmakuEnd = (item: any) => {
		try {
			item.hidden = true;
		} catch (e) {
			console.error('隐藏弹幕失败', e);
		}
	};



	const connectWebSocket = () => {
		 try {
		    const classId = '101'; // 替换为实际班级ID（从页面参数或全局状态获取）
		    websocketTask.value = uni.connectSocket({
		      url: `ws://localhost:9006/danmaku-ws?classId=${classId}`, // 携带班级ID
		      success: () => {
		        console.log('WebSocket连接请求已发送（班级ID: ' + classId + '）');
		      },
		      fail: (err) => {
		        console.error('WebSocket连接失败:', err);
		      }
		    });

			// 监听WebSocket连接打开事件
			websocketTask.value?.onOpen(() => {
				console.log('WebSocket连接已打开');
				websocketConnected.value = true;
			});

			// 监听WebSocket消息接收事件
			websocketTask.value?.onMessage((res: any) => {
				try {
					let data = res.data;
					console.log('收到WebSocket消息:', res.data);
					// 检查是否是服务器回复的消息格式
					if (typeof data === 'string' && data.startsWith('服务器回复: ')) {
						// 提取JSON部分
						const jsonStr = data.substring('服务器回复: '.length);
						data = JSON.parse(jsonStr);
					} else if (typeof data === 'string') {
						// 尝试直接解析JSON
						data = JSON.parse(data);
					}

					// 添加消息去重逻辑，通过timestamp和content判断是否为重复消息
					const isDuplicate = danmakuList.value.some(item =>
						item.timestamp === data.timestamp &&
						item.content === data.content
					);

					if (isDuplicate) {
						console.log('过滤重复消息:', data);
						return; // 如果是重复消息，则不处理
					}

					// 处理不同类型的WebSocket消息
					if (data.type === 'danmaku') {
						// 添加到弹幕列表
						const danmakuItem = {
							content: data.content,
							top: data.top !== undefined ? data.top : Math.floor(Math.random() * (isFullScreen.value ? 900 : 400)),
							color: data.color || '#ffffff',
							fontSize: data.fontSize || 16,
							user: data.user || data.userName,
							position: data.position || 'full',
							timestamp: data.timestamp || Date.now()
						};

						// 检查内容是否为空
						if (danmakuItem.content && danmakuItem.content.trim()) {
							danmakuList.value.push(danmakuItem);
							console.log('WebSocket弹幕已添加:', danmakuItem.content, '全屏状态:', isFullScreen.value);
							
							// 不再在动画结束后移除弹幕，保留历史
						}

						// 不再限制弹幕数量，保留所有历史
					}
					// 处理AI助手回复
					else if (data.type === 'ai_reply') {
						// 将AI助手的回答添加到弹幕列表
						const aiDanmaku = {
							content: data.content,
							top: Math.floor(Math.random() * (isFullScreen.value ? 900 : 400)),
							color: '#00ff00', // AI回复使用绿色
							fontSize: fontSizeMap[selectedSize.value as keyof typeof fontSizeMap] || 16,
							position: data.position || danmakuPosition.value,
							user: 'AI助手',
							timestamp: data.timestamp || Date.now()
						};

						// 检查内容是否为空
						if (aiDanmaku.content && aiDanmaku.content.trim()) {
							danmakuList.value.push(aiDanmaku);
						}

						// 不再限制弹幕数量，保留所有历史
					}
				} catch (e) {
					// 如果不是JSON格式，则作为普通文本处理
					console.log('收到WebSocket文本消息:', res.data);

					// 检查是否为重复的文本消息
					const isDuplicate = danmakuList.value.some(item =>
						item.content === res.data &&
						(Date.now() - (item.timestamp || 0)) < 1000 // 1秒内的相同消息视为重复
					);

					if (isDuplicate) {
						console.log('过滤重复文本消息:', res.data);
						return;
					}

					// 将纯文本消息作为系统弹幕显示
					const danmakuItem = {
						content: res.data,
						top: Math.floor(Math.random() * (isFullScreen.value ? 900 : 400)),
						color: '#ffffff',
						fontSize: 16,
						user: '系统',
						position: 'full',
						timestamp: Date.now()
					};

					// 检查内容是否为空
					if (danmakuItem.content && danmakuItem.content.trim()) {
						danmakuList.value.push(danmakuItem);
					}

					// 不再限制弹幕数量，保留所有历史
				}
			});

			// 监听WebSocket关闭事件
			websocketTask.value?.onClose(() => {
				console.log('WebSocket连接已关闭');
				websocketConnected.value = false;
			});

			// 监听WebSocket错误事件
			websocketTask.value?.onError((err: any) => {
				console.error('WebSocket错误:', err);
				console.error('WebSocket错误详情:', JSON.stringify(err));
				websocketConnected.value = false;
			});
		} catch (error) {
			console.error('WebSocket连接初始化失败:', error);
		}
	};


	// 发送弹幕到后端接口
	const sendDanmakuToServer = (content: string) => {
		uni.request({
			url: 'http://localhost:9006/api/danmaku/process',
			method: 'POST',
			header: {
				'Content-Type': 'application/json'
			},
			data: {
				content: content,
				userName: '用户9548' ,// 这里可以替换为实际用户名
				classId: '101',
			},
			success: (res: any) => {
				const result = res.data as any;

				if (result.code === 200) {
					// 检查AI回复是否已存在，避免重复
					const isDuplicateAI = danmakuList.value.some(item =>
						item.content === result.data &&
						item.color === '#00ff00' &&
						(Date.now() - (item.timestamp || 0)) < 5000 // 5秒内的相同AI回复视为重复
					);

					if (!isDuplicateAI && result.data && result.data.trim()) {
						// 将AI助手的回答添加到弹幕列表
						const aiDanmaku = {
							content: result.data,
							top: Math.floor(Math.random() * (isFullScreen.value ? 900 : 400)),
							color: '#00ff00', // AI回复使用绿色
							fontSize: fontSizeMap[selectedSize.value as keyof typeof fontSizeMap] || 16,
							position: danmakuPosition.value,
							timestamp: Date.now()
						};

						danmakuList.value.push(aiDanmaku);
						
						// 动画结束后清理DOM，避免内存泄漏
						setTimeout(() => {
							const index = danmakuList.value.findIndex(item => 
								item.content === aiDanmaku.content && 
								item.timestamp === aiDanmaku.timestamp
							);
							if (index > -1) {
								danmakuList.value.splice(index, 1);
							}
						}, 8500); // 动画8秒 + 0.5秒缓冲
					}

					// 限制弹幕数量，避免过多影响性能
					if (danmakuList.value.length > 100) {
						danmakuList.value.shift();
					}
				}
			},
			fail: (err: any) => {
				console.error('发送弹幕失败:', err);
			}
		});
	};

	const sendMessage = () => {
		// 1. 校验输入：空内容不发送
		if (!inputMessage.value.trim()) return;

		// 2. 不再立即添加弹幕，等待WebSocket或HTTP回调添加，避免重复

		// 3. 优先使用WebSocket，如果连接正常则只通过WebSocket发送
		if (isDanmaku.value && websocketTask.value && websocketConnected.value) {
			const danmakuMessage = {
				type: 'danmaku',
				content: inputMessage.value,
				user: '用户777', // 实际用户名（保持原逻辑）
				timestamp: Date.now()
			};

			// 通过WebSocket发送弹幕
			websocketTask.value?.send({
				data: JSON.stringify(danmakuMessage)
			});
			console.log('弹幕已通过WebSocket发送:', danmakuMessage);
		} else {
			// 4. WebSocket不可用时，使用HTTP请求发送给AI
			sendDanmakuToServer(inputMessage.value);
		}

		// 5. 清空输入框（保持原逻辑）
		inputMessage.value = '';
	};
	// 监听全屏状态变化（简化版本）
	const handleFullscreenChange = () => {
		try {
			console.log('全屏状态发生变化');
		} catch (error) {
			console.error('全屏状态监听出错:', error);
		}
	};

	onMounted(() => {
		// 创建WebSocket连接
		connectWebSocket();
		
		// 暂时注释掉全屏状态监听器，避免冲突
		// document.addEventListener('fullscreenchange', handleFullscreenChange);
		// document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
		// document.addEventListener('mozfullscreenchange', handleFullscreenChange);
		// document.addEventListener('MSFullscreenChange', handleFullscreenChange);
	});
	// 在组件卸载时关闭WebSocket连接
	onUnmounted(() => {
		if (websocket.value) {
			websocket.value.close();
			console.log('WebSocket连接已关闭');
		}
		
		// 暂时注释掉清理全屏状态监听器
		// document.removeEventListener('fullscreenchange', handleFullscreenChange);
		// document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
		// document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
		// document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
	});
</script>
<style>
	page {
		height: 100%;
		overflow: hidden;
		/* 防止页面滚动 */
	}

	.live-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #1a1a1a;
	}
/* 全屏弹幕容器 */
.fullscreen .danmaku-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;
  /* 确保弹幕显示在视频上方 */
}
	/* 全屏状态样式 */
	.live-container.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		overflow: hidden;
		background: #000000;
		/* 整个容器旋转90度实现横屏 */
		transform: rotate(90deg);
		transform-origin: center center;
		/* 调整尺寸适配旋转后的屏幕 */
		width: 100vh;
		height: 100vw;
		/* 居中显示 */
		top: 50%;
		left: 50%;
		margin-top: -50vw;
		margin-left: -50vh;
	}
	
	/* 全屏时确保内容区域占满整个容器 */
	.fullscreen .live-content {
		width: 100%;
		height: 100%;
		position: relative;
		flex: none;
	}
	/* 全屏视频容器 */
	.fullscreen-video-container {
		width: 100%;
		height: 100%;
		position: relative;
		background: #000000;
		overflow: hidden;
		/* 移除flex布局，让视频直接占满容器 */
	}
	
	/* 全屏时的底部输入框 */
	.fullscreen-footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		background: linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(60, 60, 60, 0.95) 100%);
		backdrop-filter: blur(20rpx);
		border-top: 1rpx solid rgba(255, 255, 255, 0.1);
		padding: 20rpx 30rpx;
	}
	
	
	/* 全屏时隐藏其他不需要的元素 */
	.fullscreen .header,
	.fullscreen .action-buttons,
	.fullscreen .danmaku-history {
		display: none !important;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #2a2a2a;
		z-index: 10;
	}

	.host-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	.nickname {
		color: #ffffff;
		font-size: 16px;
	}

	.viewers {
		display: flex;
		align-items: center;
	}

	.count {
		color: #ffffff;
		font-size: 14px;
		margin: 0 20rpx;
	}

	.follow-btn {
		margin: 0;
		height: 56rpx;
		line-height: 56rpx;
	}

	.live-content {
		position: relative;
		flex: 1;
		/* 占满剩余空间 */
		overflow: hidden;
	}

	.video-container {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #000000;
		overflow: hidden;
	}

	/* 视频占满容器 */
	.video-container video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持比例填充容器 */
		display: block;
	}
	
	/* 全屏视频样式 - 保持比例但可能有黑边 */
	.fullscreen-video {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: auto !important;
		height: auto !important;
		min-width: 100% !important;
		min-height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		transform: translate(-50%, -50%) scale(1.2) !important;
		transform-origin: center center !important;
		object-fit: cover !important;
		z-index: 1 !important;
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* 强制拉伸填满屏幕 - 直接占满旋转后的容器 */
	.fullscreen-video-stretch {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: fill !important;
		z-index: 1 !important;
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.danmaku-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		overflow: hidden;
		z-index: 50;
	}

	/* 删除了vertical类，因为横屏模式不需要竖排文字 */

	.danmaku-item {
		position: absolute;
		white-space: nowrap;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		animation: danmaku 8s linear;
		animation-fill-mode: forwards;
		display: flex;
	}

	/* 全屏弹幕样式 */
	.fullscreen .danmaku-item {
		position: absolute;
		background: rgba(0, 0, 0, 0.6);
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		animation: fullscreenDanmakuHorizontal 8s linear;
		white-space: nowrap;
		/* 横屏模式下弹幕从右到左水平滚动 */
		animation-fill-mode: forwards;
		z-index: 200;
		/* 弹幕从屏幕右侧开始，向左移动并消失 */
		right: -200px;
		will-change: transform, opacity;
		/* 允许动画结束后隐藏 */
		/* 移除强制可见，确保动画终点的 visibility: hidden 生效 */
	}


	/* 横屏弹幕动画 */
	@keyframes danmaku {
		from {
			transform: translateX(750rpx);
		}

		to {
			transform: translateX(-200%);
			opacity: 0;
			visibility: hidden;
		}
	}

	/* 全屏弹幕动画 */
	@keyframes fullscreenDanmaku {
		0% {
			transform: translateX(100vw);
			opacity: 0;
		}
		10% {
			opacity: 1;
		}
		90% {
			opacity: 1;
		}
		100% {
			transform: translateX(-100vw);
			opacity: 0;
		}
	}

	/* 横屏全屏模式下的弹幕动画 - 从右到左水平滚动并消失 */
	@keyframes fullscreenDanmakuHorizontal {
		0% {
			transform: translateX(0);
			opacity: 0;
		}
		5% {
			opacity: 1;
		}
		95% {
			opacity: 1;
		}
		100% {
			transform: translateX(-200%);
			opacity: 0; /* 滑动完就消失 */
			visibility: hidden;
		}
	}

	/* 弹幕完全滑出后保持在左侧的动画版本 */
	@keyframes fullscreenDanmakuPersistent {
		0% {
			transform: translateX(0);
			opacity: 0;
		}
		3% {
			opacity: 1;
		}
		85% {
			transform: translateX(-100%);
			opacity: 1;
		}
		100% {
			transform: translateX(-100%);
			opacity: 1; /* 停在左侧边缘，保持可见 */
		}
	}

	.action-buttons {
		position: absolute;
		right: 20rpx;
		bottom: 200rpx;
		/* 调整位置以避开历史弹幕区域 */
		z-index: 10;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.action-text {
		color: #ffffff;
		font-size: 12px;
		margin-top: 10rpx;
	}

	.danmaku-history {
		height: 400rpx;
		background-color: #2a2a2a;
		border-top: 2rpx solid #3a3a3a;
		padding: 20rpx;
	}

	.history-list {
		height: 100%;
	}

	.history-item {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		border-left: 6rpx solid #ffffff;
		margin-bottom: 10rpx;
	}

	.history-user {
		color: #007AFF;
		font-weight: bold;
		margin-right: 10rpx;
		font-size: 24rpx;
		white-space: nowrap;
	}

	.history-content {
		flex: 1;
		color: #ffffff;
		font-size: 24rpx;
		margin-right: 10rpx;
		word-break: break-all;
	}

	.history-time {
		color: #999;
		font-size: 20rpx;
		white-space: nowrap;
	}

	.footer {
		padding: 20rpx;
		background-color: #2a2a2a;
		
	}

	.input-area {
		display: flex;
		align-items: center;
	}

	.danmaku-switch {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.switch-text {
		color: #ffffff;
		font-size: 14px;
		margin-left: 10rpx;
	}

	.message-input {
		flex: 1;
		height: 72rpx;
		background-color: #3a3a3a;
		border-radius: 36rpx;
		padding: 0 30rpx;
		color: #ffffff;
		font-size: 14px;
		margin-right: 20rpx;
	}

	.send-btn {
		margin: 0;
		height: 72rpx;
		line-height: 72rpx;
	}

	/* 全屏按钮样式 */
	.fullscreen-btn {
		position: absolute;
		right: 20rpx;
		bottom: 100rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 998;
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		transition: all 0.3s ease;
		cursor: pointer;
		pointer-events: auto;
	}

	.fullscreen-btn:active {
		transform: scale(0.95);
		background: rgba(0, 0, 0, 0.8);
	}
	
	.fullscreen-btn:hover {
		background: rgba(0, 0, 0, 0.8);
		transform: scale(1.05);
	}
	
	/* 全屏时的全屏按钮位置调整 */
	.fullscreen .fullscreen-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		bottom: auto;
	}
	
	/* 增强版全屏按钮 */
	.enhanced-fullscreen-btn {
		position: absolute;
		right: 100rpx;
		bottom: 100rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 0, 0, 0.8);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		transition: all 0.3s ease;
		cursor: pointer;
		pointer-events: auto;
	}

	.enhanced-fullscreen-btn:active {
		transform: scale(0.9);
		background: rgba(255, 0, 0, 1);
	}
	
	/* 视频模式切换按钮 */
	.video-mode-btn {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		width: 80rpx;
		height: 60rpx;
		background: rgba(0, 0, 255, 0.8);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		transition: all 0.3s ease;
		cursor: pointer;
		pointer-events: auto;
	}

	.video-mode-btn:active {
		transform: scale(0.9);
		background: rgba(0, 0, 255, 1);
	}

	/* 弹幕设置面板样式 */
	.danmaku-settings {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 100;
		padding: 40rpx;
	}

	.settings-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.settings-title {
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;
	}

	.settings-content {
		background-color: #3a3a3a;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.setting-group {
		margin-bottom: 40rpx;
	}

	.setting-group:last-child {
		margin-bottom: 0;
	}

	.setting-label {
		color: #ffffff;
		font-size: 28rpx;
		display: block;
		margin-bottom: 20rpx;
	}

	.color-options {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.color-option {
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		border: 4rpx solid transparent;
	}

	.color-option.active {
		border-color: #ffffff;
		transform: scale(1.2);
	}

	.size-options,
	.position-options {
		display: flex;
		gap: 20rpx;
	}

	.size-option,
	.position-option {
		flex: 1;
		text-align: center;
		padding: 15rpx;
		background-color: #5a5a5a;
		color: #ffffff;
		border-radius: 10rpx;
	}

	.size-option.active,
	.position-option.active {
		background-color: #007AFF;
	}

	/* 竖屏全屏时隐藏不需要的元素 */
	.fullscreen .header,
	.fullscreen .action-buttons,
	.fullscreen .danmaku-history {
		display: none !important;
	}
</style>